<template>
  <div>
    <a-modal
      title="Title"
      v-model:visible="isShow"
      :confirm-loading="loading"
      okText="修改"
      @ok="handleOk"
    >
      <a-form ref="form" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="原密码" name="oldPass">
            <a-input-password v-model:value="form.oldPass">
            </a-input-password>
        </a-form-item>
        <a-form-item label="新密码" name="newPadd">
            <a-input-password v-model:value="form.newPass">
            </a-input-password>
        </a-form-item>
        </a-form>
    </a-modal>
  </div>
</template>
<script>
import AuthApi from '../../api/AuthApi';
import { Modal } from 'ant-design-vue';
import { h } from 'vue';
import store from '../../store';
export default {
  name: 'AuthResetPasskey',
  props: {
    success: Function,
    failure: Function,
  },
  data() {
    return {
      isShow: false, loading: false,
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      form: {
      },
      rules: {
        oldPass: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度为6~20位', trigger: 'blur' },
        ],
        newPass: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度为6~20位', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    open() {
        this.isShow = true
    },
    handleOk() {
      this.$refs.form
      .validate()
      .then(() => {
        this.loading = true
        AuthApi.resetPasskey(this.form).then(response => {
          if (response.data.code === 1) {
            this.isShow = false
            this.form = {}
            // this.$message.success('修改成功')
            var that = this
            Modal.success({
              title: '修改成功',
              content: h('div', {}, [
                h('p', '请重新登录'),
              ]),
              okText: '重新登录',
              onOk(){
                store.clearTokenAction()
                store.setAuthedAction(false)
                that.$router.replace({
                  path: "/"
                });
              }
            });
            // 回调
            this.$nextTick(()=>{
                this.success && this.success()
            })
          } else {
            this.$message.error(`修改失败：${response.data.message}`)
            // 
            this.failure && this.failure()
          }
        }).catch((error)=>{
          this.$message.error(`修改失败：${error.message}`)
        }).then(()=>{
          this.loading = false
        })
      })
      .catch(error => {
        console.log('error', error);
      })
    },
  },
};
</script>
